import React from 'react';
import { Menu } from 'antd';
import './app.less';
import menuList, { MenuObj } from './router/menu';
import { useNavigate, Outlet } from 'react-router-dom';

const { SubMenu, Item } = Menu;

const renderMenu = (list: MenuObj[] | undefined) => {
  const navigator = useNavigate();
  if (!!list && Array.isArray(list) && list.length) {
    return list.map(menu => {
      if (
        !!menu.children &&
        Array.isArray(menu.children) &&
        menu.children.length
      ) {
        return (
          <SubMenu key={menu.path} title={menu.name}>
            {renderMenu(menu.children)}
          </SubMenu>
        );
      } else {
        return (
          <Item onClick={() => navigator(menu.path)} key={menu.path}>
            {menu.name}
          </Item>
        );
      }
    });
  }
};

const App = () => {
  return (
    <div className="app">
      <header>header</header>
      <main>
        <Menu onClick={() => {}} mode="inline">
          {renderMenu(menuList[0].children[0].children)}
        </Menu>
        <div className="content">
          <Outlet />
        </div>
      </main>
      <footer>footer</footer>
    </div>
  );
};

export default App;
